<template>
  <div>

    <section>
      <mt-field readonly="readonly" class="mtInput" label="姓名" placeholder="请输真实姓名" v-model="username"></mt-field>
      <!-- <mt-field readonly="readonly" class="mtInput" label="身份证号" placeholder="请输入身份证号"
        v-model="sfzh"
      ></mt-field> -->
      <mt-field class="mtInput" label="医保卡号" placeholder="请输入医保卡号(银行账号)"
        v-model="ybkh"
      ></mt-field>
<!--       <mt-field class="mtInput" label="手机号" placeholder="医保卡预留的手机号" type="tel"
        v-model="mobile"
      ></mt-field>
      <mt-field class="mtInput" label="手机验证码" size="normal" placeholder="请输入验证码"
        v-model="mobilevalicode"
      >
        <mt-button :class="{'buttonTime' : !changeValiButton}" type="primary" size="normal" @click.native="getMobileCode"
          plain
        >
          <span v-if="changeValiButton">{{valiButton}}</span>
          <span v-else>{{minutes}} : {{seconds}}</span>
        </mt-button>
      </mt-field>
      <mt-field class="mtInput" v-if="errTime" label="验证码" v-model="valicode">
        <img src="" height="45px" width="100px">
      </mt-field> -->
      <mt-button class="mtInput" type="primary" size="large" @click.native="doModifyYbk">提 交 修 改</mt-button>
    </section>

    <section class="ybk_notice">
      <div>
        <span>
          <li>1.  注册信息必须真实有效，否则无法绑定成功</li>
        </span>
      </div>
    </section>

  </div>
</template>

<script>
import { isIdCardNo } from '../../plugins/date.js';

const { config } = window; 

export default {
  data() {
    return {
      changeValiButton: true,
      valiButton: '获取验证码',
      // 对用户输入的每一个注册信息，都要进行正则表达式校验

      ts: this.newStore(),
      tq: this.getData(),
      reg: this.regular(),

      headTitle: '修改医保卡',

      userid: '',
      username: '',
      mobile: '',
      sfzh:'',
      ybkh:'',
      openid: '',
      ttid:'',
      zyzh: '', // 备用
      valicode: '', // 用户提交的验证码

      mobilevalicode: '', // 用户提交的手机验证码
      errTime: false,
      valicodeback: '', // 服务返回的验证码，VUE转为图片

      code: '',

      extReturn: '', // 验证是否当前手机

      minutes: 1,
      seconds: 0,

      userInfo: {},
    };
  },
  created() {
    document.title = this.headTitle;
  },
  mounted() {
    const ybkInfo = JSON.parse(`${this.$route.query.ybkInfo}`);
    this.userid = ybkInfo.YBK_ID;
    this.username = ybkInfo.YBK_NAME;
    this.mobile = ybkInfo.YBK_SJH;
    this.sfzh = ybkInfo.YBK_SFZH;
    this.ybkh = ybkInfo.YBK_YBKH;

    
    // this.userInfo = JSON.parse(localStorage.getItem("userInfo."+config.LT));
    // this.username = this.userInfo.username;
  },
  destroyed() {
  },
  components: {
  },
  computed: {
    second() {
      return this.num(this.seconds);
    },
    minute() {
      return this.num(this.minutes);
    },
  },
  methods: {

    // 获取医保卡信息
    // 未使用

    //
    timer() {
      const _this = this;
      const time = window.setInterval(() => {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59;
          _this.minutes -= 1;
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          _this.seconds = 0;
          window.clearInterval(time);
          // this.$router.back(-1);
          this.changeValiButton = true; // 切换显示按扭内容
        } else {
          _this.seconds -= 1;
        }
      }, 1000);
    },
    // 获取code
    getUrlParam(name) { // ---返回的地址列表中获取CODE, name="code"
      const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
      const r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 提交注册
    doModifyYbk() {

      if(this.userid.length<1){
        this.$messagebox('注册提示', '卡ID不能为空');
        return;
      }

      if(this.username.length<1){
        this.$messagebox('注册提示', '姓名不能为空');
        return;
      }

/*       if(this.mobile.length<1){
        this.$messagebox('注册提示', '手机号不能为空');
        return;
      }
      if (!this.reg.IsMobile(this.mobile)) {
        this.$messagebox('正确输入手机号');
        return;
      }

      if(this.mobilevalicode.length<1){
        this.$messagebox('注册提示', '验证码不能为空');
        return;
      } */
/*        if(this.sfzh.length<1){
        this.$messagebox('注册提示', '身份证号不能为空');
        return;
      }  */
       if(this.ybkh.length<1){
        this.$messagebox('注册提示', '医保号不能为空');
        return;
       }
      /* if(!isIdCardNo(this.sfzh)){
        this.$messagebox('注册提示', '请输入正确的身份证号');
        return;
      }    */  
      // 提交注册信息
      
      const ybkinfo = {
        ybkid: this.userid,
        name: this.username,
        sfzh: this.sfzh,
        ybkh: this.ybkh,
        sjh: this.mobile
      };

      const DATA = {
        ybkreg: ybkinfo,
      };

      this.tq.modifyYbk(DATA,this).then((ts) => {
        this.$messagebox('修改医保卡成功！');
        this.$router.go(-1);
      });


    },

    // 获取验证码, 当 errTime > 3 时调用
    // 要求，当用户点击获取短信验证码后，页面自动计时，半小时内“获取”按扭不可用，并显示倒计时时间样式,时限取消后点击图片更新
    getCode() {
      this.spost(this.ts, '/doctor/WeixinLogin.lg', {
        reqType: 'getCode',
        RYBID: 'PAT',
      }).then((ts) => {
        // alert(JSON.stringify(ts.d));
        this.valicodeback = ts.d.valicode;
      });
    },
    // 获取短信验证码
    // 要求，当用户点击获取短信验证码后，页面自动计时，半小时内“获取”按扭不可用，并显示倒计时时间样式,时限取消后点击更新
    getMobileCode() {
      if (!this.changeValiButton) {
        return;
      }
      this.spost(this.ts, 'https://zyext.renyibao.com/LoginServlet?reqType=mcode&mobile='+this.mobile).then((ts) => {

        if (ts.d.errCode == '200') {
          this.$messagebox('提示', '验证码已经发送到您的手机上，请在1分钟内输入验证码'); // 发布到项目中时使用自定义的弹窗
          this.minutes = 1;
          this.timer(); // 获得验证码按扭开始倒计时5分钟
          
          this.ttid = ts.d.rybData.ttid;

          this.changeValiButton = false;
        } else if (ts.d.errCode == '514') {
          this.$messagebox(`${ts.d.errMessage}`); // 发布到项目中时使用自定义的弹窗
        } else if (ts.d.errCode == '515') {
          this.$messagebox('非法操作'); // 发布到项目中时使用自定义的弹窗
        } else {
          this.$messagebox(`短信服务异常:   ${ts.d.errMessage}`);
        }
      });
    },
  },
};
</script>
<style scoped lang="stylus">
.ybk_notice{
    display: flex;
    width: 90%;
    margin: auto;
    font-size: .8rem;
}
.buttonTime{
    border: 1px solid #ccc;
    background-color: transparent;
    color: rgb(87, 84, 84);
    display: inline-block;
    padding: 0 12px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 18px;
    height: 41px;
    outline: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.mtInput{
  margin-bottom: .5rem;
}
.login-wrap{text-align:center;}
    input{
      display:block;
      width:90%;
      height:40px;
      line-height:20px;
      margin:0 auto;
      /* margin-bottom: 10px; */
      outline:none;
      border:1px solid #ccc;
      padding:10px;
      box-sizing:border-box;}
.mint-button--large {
  /* display: -webkit-inline-box; */
  width: 90%;
  margin: 2rem auto;
}
</style>
